<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
</head>
<body>
<div class="layui-container" style="width: 500px;height: 330px;margin-top: 130px;border: 1px solid #009688;padding-top: 60px;border-radius: 15px">
    <form class="layui-form" action="" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-inline">
                <input type="text" name="id" id="id" lay-verify="id" placeholder="请输入用户名" autocomplete="off" class="layui-input" value="1">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-inline">
                <input type="password" name="password" id="password" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input"
                       value="123456">
            </div>
        </div>
        <div class="layui-form-item" pane="">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="0" title="用户" checked="">
                <input type="radio" name="type" value="1" title="管理员">
            </div>
        </div>
        <div class="layui-form-item">
            <input type="button" class="layui-btn" lay-submit="" id="commit" style="margin-left: 160px;" value="登录"></input>
        </div>
    </form>
</div>
<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script>
    layui.use(['form'], function(){
        var form = layui.form;

        //自定义验证规则
        form.verify({
            username: function(value){
                if(value.length == 0){
                    return '用户名不能为空';
                }
            }
            ,password: [/(.+){6,12}$/, '密码必须6到12位']
        });

    });
</script>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script>
    $(function(){

        layui.data('user', {
            key: 'data',
            value: [
            ]
        });
        $("#commit").click(function () {
            console.log("enter");
            var id = $("#id").val();
            var password = $("#password").val();
            var type = $('input[type=radio][name=type]:checked').val();

            console.log(id);

            var formdata=new FormData();
            formdata.append("id",id);
            formdata.append("password",password);
            formdata.append("type",type);

            var user ={
                id:id,
                password:password
            };


            $.ajax({
                type: 'POST',
                dataType: "json",
                url:"/user/login",//这里是请求的地址
                data: formdata,
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头

                // url:"/user/login",//这里是请求的地址
                // data: JSON.stringify(user),
                // contentType : "application/json;charset=UTF-8",
                // async:true,

                success:function(result){
                    console.log(result);
                    var user = layui.data('user').data;//对localStorage的封装
                    user.push({nickname:result.data.nickname,logoUrl:result.data.logoUrl,id:result.data.id});
                    //需要自己手动跟新，不然内容不会改变
                    layui.data('user', {
                        key: 'data',
                        value: user
                    });
                    layui.data('token', {
                        key: 'data',
                        value: result.token
                    });
                    var token = layui.data('token').data;
                    $.ajaxSetup( {
                        beforeSend: function (xhr) { //可以设置自定义标头
                            xhr.setRequestHeader('token', token);
                        }
                    } );
                    window.location.href = "/user/redirect/main";
                }
                ,error:function(result){
                    console.log("fail: " +result);
                    // window.location.href=window.location.href;
                }
            });
        });
    });

</script>
</body>
</html>